<template>
    <div  class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
         <el-form-item label="园所性质：" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
            <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item label="地区类型：" prop="type">
          <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
    </el-form>
    <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item
            v-for="(item,index) in breadcrumbList"
            :key="index"
            @click.native="clickBreadcrumb(item)"
            ><span style="cursor:pointer;font-weight: bold;margin-left: 10px;margin-top: 20px;font-size: 18px;">{{item.name}}</span></el-breadcrumb-item>
          </el-breadcrumb>
    <div class="charts"   >
            <div  ref="myChartdom1" class="chartdom1"></div>
            <div  ref="myChartdom2" class="chartdom2"></div>
          </div>
    </div>
</template>
<script>
import { checkSchool,checkClass,checkKid } from "@/api/qu/qyyecjzx";
import {clazzList } from "@/api/qu/qyyerygk";

import moment from "moment";
 export default {
   name: "qyyecjzx",
   data() {
     return {
          loading:false,
          // 查询参数
          queryParams: {
             name:'',
             nature:'',
             type:'',
             pageNum: 1,
             pageSize: 10,
           },
           myCharts1:null,
           myCharts2:null,
           schoolNatureOptions:[],
           schoolTypeOptions:[],
           heightList:[
              {name:'园所1',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所2',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所3',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所4',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所5',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所6',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所7',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
           ],
           weightList:[
              {name:'园所1',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所2',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所3',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所4',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所5',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所6',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              {name:'园所7',ax:'5',axRatio:'6',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
           ],
           breadcrumbList:[
               {name:'园所',value:'1'},
               // {name:'幼儿园',value:'2'},
               // {name:'年级',value:'3'},
            ],
            bread:{},




        }
   },
   created() {
        this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
         this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
        });
   },
   mounted(){
     this.myCharts1 = this.$echarts.init(this.$refs.myChartdom1)
     this.myCharts2 = this.$echarts.init(this.$refs.myChartdom2);
     this.heightchart()
     this.weightchart()
     window.addEventListener("resize", this.monitorResize);
   },
   methods: {
     //监听添加面包屑
     addBread(bread){
      const index=this.breadcrumbList.findIndex(item=>item.name===bread.name)
      if(index>-1) {
        const index=this.breadcrumbList.findIndex(item=>item.name===bread.name)
        this.breadcrumbList=this.breadcrumbList.slice(0,index+1)
      }else{
        this.breadcrumbList.push(bread)
      }
    },
    //点击面包屑
    clickBreadcrumb(bread){
      // if(bread.code ==='全网') return
      // this.radio='01'
      const index=this.breadcrumbList.findIndex(item=>item.name===bread.name);
      this.breadcrumbList=this.breadcrumbList.slice(0,index+1);
    if(bread.name.includes('园所')){
          this.bread={
            name:bread.name,
            value:bread.value
          }
          this.heightList=[
                {name:'园所1',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'园所2',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'园所3',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              ];
              this.weightList=[
                {name:'园所1',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'园所2',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'园所3',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              ];
          this.heightchart()
        this.weightchart()
      }else if(bread.name.includes('年级')){
        this.heightchart()
        this.weightchart()
      }else{
        this.bread={
          name:'',
          value:''
        }
      }
    },
        // 学校层面
        async getcheckSchool(){
            this.loading=true;
            try {
              const obj ={
                schoolName:this.queryParams.name,
                schoolType:this.queryParams.type,
                nature:this.queryParams.nature,
                checkDate:moment(this.dateTime).format("YYYY-MM-DD"),
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
              }
             const data =  await checkSchool(obj)
             this.checkSchoolList=data.rows;
             this.total=data.total;
             console.log(data);
             this.loading=false;
            } catch (error) {
              console.log(error);
            }
        },
       // 园所性质字典翻译
       schoolTypeFormat(row, column) {
         return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
       },
       //地区类型字典翻译
       schoolNatureFormat(row, column) {
         return this.selectDictLabel(this.schoolNatureOptions, row.nature);
       },
         // 性别字典翻译
         sexFormat(row, column) {
         return this.selectDictLabel(this.sexOptions, row.studentSex);
       },

       /** 搜索按钮操作 */
       handleQuery() {
          this.queryParams.pageNum = 1;
          this.getcheckSchool();
        },
         /** 重置按钮操作 */
         resetQuery() {
          this.resetForm("queryForm");
          this.queryParams={
            type:'',
            nature:'',
            name:''
          }
          this.dateTime=new Date()
          this.handleQuery();
        },
        heightchart(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '幼儿身高分析',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                 interval: 0,//使x轴文字显示全
                },
                data: this.heightList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    name: '偏低',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.ax ),
                },
                {
                    name: '偏低',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.axRatio ),
                },
                {
                    name: '中下',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.zx ),
                },
                {
                    name: '中下',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.zxRatio ),
                },
                {
                    name: '中等',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.zd ),
                },
                {
                    name: '中等',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.adRatio ),
                },
                {
                    name: '中上',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.zs ),
                },
                {
                    name: '中上',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.zsRatio ),
                },
                {
                    name: '偏高',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.pg ),
                },
                {
                    name: '偏高',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.heightList.map(item=>item.pgRatio ),
                },
            ]
            }
            this.myCharts1.on("click",(params)=>{
              this.bread={
                name:'年级',
                value:'1'

              }
              this.addBread(this.bread);
              this.heightList=[
                {name:'年级1',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'年级2',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'年级3',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              ]
              this. heightchart();
            //   this.bread={
            //     name:'年级',
            //     value:'schoolcode21'

            //   }
            //   this.addBread(this.bread);
            //   this.schoolList=[
            //     {name:'班级',value:'2'},
            //     {name:'班级2',value:'2'},
            //     {name:'班级3',value:'2'},

            //   ]
            //   this. myChartsFn2();
            })
              // 使用刚指定的配置项和数据显示图表
              this.myCharts1.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
        },
        weightchart(){
            const option = {
           // backgroud:'#333',
           title: {
             text: '幼儿体重分析',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                selectedMode: 'single',
                top:0,
                left:'right',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                axisLabel: {//x轴文字的配置
                 show: true,
                 interval: 0,//使x轴文字显示全
                },
                data: this.weightList.map(item=>item.name)
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            color:['#2f89cf','#27d08a'],
            series: [
                {
                    name: '偏低',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.ax ),
                },
                {
                    name: '偏低',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.axRatio ),
                },
                {
                    name: '中下',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.zx ),
                },
                {
                    name: '中下',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.zxRatio ),
                },
                {
                    name: '中等',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.zd ),
                },
                {
                    name: '中等',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.adRatio ),
                },
                {
                    name: '中上',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.zs ),
                },
                {
                    name: '中上',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.zsRatio ),
                },
                {
                    name: '偏高',
                    type: 'bar',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.pg ),
                },
                {
                    name: '偏高',
                    type: 'line',
                    // stack: 'Ad',
                    barWidth: '30%',
                    emphasis: {
                        focus: 'series'
                    },
                    label: {
                      show: true,
                      position: 'inside',
                      fontSize: 15
                    },
                    data: this.weightList.map(item=>item.pgRatio ),
                },
            ]
            }
            this.myCharts2.on("click",(params)=>{
              this.bread={
                name:'幼儿园',
                value:'schoolcode'

              }
              this.addBread(this.bread);
              this.weightList=[
                {name:'年级1',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'年级2',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
                {name:'年级3',ax:'5',axRatio:'5',zx:'10',zxRatio:'7',zd:'20',adRatio:'50',zs:'20',zsRatio:'20',pg:'10',pgRatio:'8'},
              ]
              this. weightchart();
            })
              // 使用刚指定的配置项和数据显示图表
              this.myCharts2.setOption(option,true);
              window.addEventListener("resize", this.monitorResize);
        },
         //地图监听窗口缩放事件
        monitorResize(){
         this.myCharts1.resize();
         this.myCharts2.resize();
       },
   }
 };
</script>
<style lang="scss" scoped>
.charts{
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
    width: 100%;
    height:840px;
    margin-top: 20px;
    .chartdom1{
        width: 93%;
        height: 45%;
    }
    .chartdom2{
        margin-top: 20px;
        width:93%;
        height: 45%;

    }
}
</style>
